<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个AJAX 请求</title>
    <style>
        div.box{
            height:300px;
            width:300px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<script>
    window.onload = function (){
        let BtnObj = document.getElementById("RequestBtn");
        BtnObj.onclick = function (){
        // 四个步骤:
        /*
            1.创建XMLHttpRequest对象
            2.为该对象的onreadystatechange属性赋值一个回调函数,只要XMLHttpRequest对象的readyState发生变化,这个回调函数就会执行
            0-1执行一次
            1-2执行一次
            2-3执行一次
            3-4执行一次
            一共会执行4次
          如果当readyState的值为4就说明响应完毕了,此时就可以接收响应的状态码来判断接下来的动作
          3.调用XMLHttpRequest对象的open方法来获取客户端和服务器的通道.
          xml.open(method,url,async,user,pwd);
          method:请求的类型,可以是GET,PSOT,等等
          url:请求的url.
          async:为true则说明是一个异步请求,为false则是一个同步请求
          user和pwd是访问服务器时,假如服务器需要用户名和密码的口令就需要这两个参数,一般情况是不需要的.
          4.调用XMLHttpRequest对象的send方法将通道中的请求发送出去
        */
            let xml = new XMLHttpRequest();
            xml.onreadystatechange = function () {
                 if(xml.readyState==4){
                     if(xml.status ==200){
                          // 获取服务器端的返回的数据,通过xml对象的responseText方法
                          document.getElementsByClassName("box")[0].innerText = xml.responseText;
                     }else if(xml.status ==404){
                         alert("404找不到资源")
                     }else if(xml.status == 500){
                         alert("服务器内部资源错误")
                     }
                 }
            }
            xml.open("GET","/AJAX01/ajaxRequest",true);
            xml.send();
        }
    }
</script>
<!-- 1.定义一个按钮,用于发送ajax请求-->
<!-- 2. 定义一个div,将从服务器接收到的数据渲染到div中-->
<input type="button" id="RequestBtn" value="这是一个button"/>
<!--<a href="http://localhost:8080/AJAX01/ajaxRequest"> 点我发送请求</a>-->
<div class="box"></div>
</body>
</html>